<template>
  <!-- #ifdef MP-WEIXIN -->
  <uv-navbar
    :fixed="false"
    :title="title"
    left-arrow
    @leftClick="$onClickLeft"
  />
  <!-- #endif -->
  <view style="padding-bottom: 120rpx" class="p-3">
    <view class="card">
      <view class="card_item flex content-center">
        <view class="left">
          {{ currentLanguageTexts.shopnames }}
        </view>
        <input
          class="right"
          v-model="formData.name"
          type="text"
          :placeholder="currentLanguageTexts.PleaseContent"
        />
      </view>
      <view class="card_item flex content-center">
        <view class="left">
          {{ currentLanguageTexts.Storephonenumber }}
        </view>
        <input
          class="right"
          v-model="formData.mobile"
          type="text"
          :placeholder="currentLanguageTexts.PleaseContent"
        />
      </view>
      <view class="card_item flex content-center">
        <view class="left">
          {{ currentLanguageTexts.Mapaddress }}
        </view>
        <view class="input" @click="chooseLocation">{{
          formData.addressMap
            ? formData.addressMap
            : currentLanguageTexts.Pleaseanaddress
        }}</view>
        <!-- <input class="right" @click="chooseLocation" v-model="formData.mobile" type="text" placeholder="请输入"> -->
      </view>
      <view class="card_item flex content-center">
        <view class="left">
          {{ currentLanguageTexts.address }}
        </view>
        <input
          class="right"
          v-model="formData.address"
          type="text"
          :placeholder="currentLanguageTexts.PleaseContent"
        />
      </view>
    </view>

    <view class="card_thr">
      <view class="card_item flex content-center justify-between line">
        <view class="left">
          {{ currentLanguageTexts.Businessstarttime }}
        </view>
        <view class="flex content-center" @click="setShow(1)">
          {{
            formatDateTime(formData.startTime, 'hh:mm:ss') ||
            currentLanguageTexts.PleaseContent
          }}
          <uv-icon name="arrow-right" size="20"></uv-icon>
        </view>
      </view>
      <view class="card_item flex content-center justify-between">
        <view class="left"> </view>
        <view class="flex content-center" @click="setShow(2)">
          {{
            formatDateTime(formData.endTime, 'hh:mm:ss') ||
            currentLanguageTexts.PleaseContent
          }}
          <uv-icon name="arrow-right" size="20"></uv-icon>
        </view>
      </view>
    </view>
    <uv-datetime-picker
      ref="datetimePicker"
      @confirm="confirm"
      v-model="value1"
      mode="time"
    >
    </uv-datetime-picker>

    <view class="fixed">
      <view class="btn" @click="update">
        {{ currentLanguageTexts.save }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { updateShop } from '@/api/merchant';
import { onLoad } from '@dcloudio/uni-app';
import { useMainStore } from '@/store/store';
import { storeToRefs } from 'pinia';
import { formatDateTime } from '@/utils/util';
const main = useMainStore();
const { merchartShop, currentLanguageTexts } = storeToRefs(main);
const title = ref(currentLanguageTexts.value.StoreInformation);
const datetimePicker = ref();
const index = ref(0);
const value1 = ref(formatDateTime(new Date()));

const formData = ref({
  id: merchartShop.value.id,
  name: merchartShop.value.name,
  mobile: merchartShop.value.mobile,
  addressMap: merchartShop.value.addressMap,
  address: merchartShop.value.address,
  startTime: merchartShop.value.startTime,
  endTime: merchartShop.value.endTime,
});

const update = async () => {
  let res = await updateShop(formData.value);
  if (res) {
    main.SET_MERCHART_SHOP(res);
    uni.navigateBack();
  }
};

const setShow = (i) => {
  datetimePicker.value.open();
  index.value = i;
};

const confirm = (e) => {
  let myTime = e.value.split(':');

  let now = new Date();
  let nowStr = formatDateTime(now, 'yyyy-MM-dd');

  let newTime = nowStr + ' ' + e.value;
  if (index.value == 1) {
    formData.value.startTime = new Date(newTime);
  } else {
    formData.value.endTime = new Date(newTime);
  }
};

const chooseLocation = async () => {
  uni.chooseLocation({
    success: function (res) {
      formData.value.addressMap = res.address + ' ' + res.name;
      formData.value.lat = res.latitude;
      formData.value.lng = res.longitude;
    },
    fail: function (res1) {},
    complete: function (res2) {},
  });
};
</script>

<style lang="scss">
.mlimg {
  width: 479rpx;
  height: 280rpx;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  height: 120rpx;

  .btn {
    width: 700rpx;
    height: 98rpx;
    background: #09b4f1;
    border-radius: 14rpx;
    margin: 0 auto;
    line-height: 98rpx;
    text-align: center;
    font-size: 32rpx;
    color: #ffffff;
  }
}

.card {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  background-color: #fff;

  .title {
    width: 620rpx;
    height: 64rpx;
    background: #a0e0ff;
    border-radius: 10rpx;
    text-align: center;
    font-size: 24rpx;
    color: #0097e1;
    line-height: 64rpx;
  }

  .card_item {
    padding: 34rpx 0;
    box-sizing: border-box;
    border-bottom: 1rpx solid #f5f5f5;

    .left {
      font-size: 28rpx;
      color: #333333;
      width: 140rpx;
    }

    .yzm {
      width: 300rpx;
    }

    .btn {
      width: 158rpx;
      height: 50rpx;
      background: #ffffff;
      border-radius: 25rpx;
      border: 2rpx solid #0caffe;
      font-size: 24rpx;
      color: #0caffe;
      text-align: center;
      line-height: 50rpx;
      margin-top: -10rpx;
      margin-left: 20rpx;
    }
  }
}

.card_thr {
  padding: 20rpx 40rpx;
  box-sizing: border-box;
  background-color: #fff;

  .card_item {
    padding: 34rpx 0;
    box-sizing: border-box;

    .left {
      font-size: 28rpx;
      color: #333333;
    }
  }
}

.line {
  border-bottom: 1rpx solid #f5f5f5;
}
</style>
